<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/* 思路：1.去除元素默认外边距【通配选择器】设置背景颜色
			        2.product_card   设置样式：内边距，边框设置颜色，加倒角
					加阴影，所有内容--居中：text-align:center
					3.图片边框加倒角，外边距
					4.小米su7 文字：外边距？
					5.￥279999.00 文字大小，外边距？
					6.颜色，外边距？内边距？*/
					
					#product_card{
						width: 280px;
						height: 490px;
						background: #f5f5f5;
				        padding: 20px ;
						box-shadow: 1px 1px 50px 10px #e7e7e7 inset;
						text-align: center;
					}
					img{
						border-radius: 5px 5px 5px 5px ;
					}
					
					
					
					#sou{
						width: 220px;
						height: 50px;
						box-shadow: #e7e7e7;
						border: 1px solid #000000;
						
					}
					p{
						width: 120px;
						height: 20px;
						
					}
					button{
						width: 50px;
						height: 20px;
						
						background: red;
						position: relative;
						bottom: 25px;
						left: 130px;
					
					}
		</style>
	</head>
	<body>
		<div id="product_card">
			<img src="img/img/海报.jpg" alt="su7" width="230px" height="350px"/>
			<h3 style="font-size: 16;">小米su7</h3>
			<p style="color: red; text-align: center;">￥279999.00</p>
			<p style="color: #c7c7c7;text-align: center;">已有<span>10万+</span>人评价</p>
		</div>
		<hr >
		<div id="sou">
			<p style="font-size: 16; color: #c7c7c7;">搜索 京东商品<button style="color: white;">搜索</button></p>
			
		</div>
	</body>
</html>